<template>
  <div>
    <div class="top" v-if="userInfo">
      <div class="top-content">
        <div class="user-info">
          <img :src="userInfo.head_image" alt="" class="avatar" v-if="userInfo.head_image"/>
          <img src="@/assets/image/default-avatar.jpeg" alt="" class="avatar" v-else/>
          <div class="user-info-center">
            <div class="user-name">{{ userInfo.username || '未设置用户名'}}</div>
            <div class="company-name">{{ userInfo.mobile }}</div>
          </div>
          <!-- <div class="user-type" @click="delAccount">删除</div> -->
        </div>
        <div class="view-count-wrapper">
          <p>获得浏览量：<span class="blue-text">{{ userInfo.sum_view }}</span></p>
          <p>发布视频：<span class="blue-text">{{ userInfo.sum_push }}</span></p>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="item" v-for="(item, index) in list" :key="index" @click="viewItem(item)">
        <div class="item-top" :style="{backgroundImage: 'url(' + item.video_cover_url + ')'}">
          <div class="date">{{ item.time }}</div>
          <div class="play-info">
            <img src="@/assets/image/my-video-play-btn.png" alt="" class="play-btn"/>
            <span>{{ item.play_total || 0}}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="detail-dialog" v-if="showVideoDialog">
      <div 
        @click="closeVideoDialog"
        class="dialog-content" 
        >
        <div class="dialog-top">
          <img src="@/assets/image/dialog-back.png" alt="" class="back"/>
          <span class="dialog-title">详情</span>
        </div>
        <video :src="videoUrl" class="preview-video" ref="video"></video>
        <img 
          @click.stop="playVideo"
          v-if="!isPlaying"
          src="@/assets/image/play-media-btn.png" alt="" 
          class="dialog-play-btn"/>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserInfo, listPublishRecord, updateUserStatus } from '@/api/account'
import { getOssDomain } from '@/api/oss'
export default {
  data () {
    return {
      showVideoDialog: false,
      isPlaying: false,
      userInfo: null,
      page: {
        current_page: 1,
        page_size: 30
      },
      list: [], // 视频列表
      oss_domain: '', // oss 域名
      videoUrl: '',
    }
  },
  async mounted () {
    if (!sessionStorage.getItem('oss_domain')) {
      const res = await getOssDomain()
      sessionStorage.setItem('oss_domain', res.domain)
      this.oss_domain = res.domain
    } else {
      this.oss_domain = sessionStorage.getItem('oss_domain')
    }
    this.getUserInfo()
    this.getVideoList()
  },
  methods: {
    closeVideoDialog () {
      this.showVideoDialog = false
      this.isPlaying = false
    },
    viewItem (item) {
      this.videoUrl = item.video_url
      this.showVideoDialog = true
    },
    playVideo () {
      this.$refs.video.play()
      this.isPlaying = true
    },
    delAccount () {
      updateUserStatus({
        account_id: this.$route.query.account_id,
        status: 'DELETED'
      }).then(res => {
        this.$router.go(-1)
      })
    },
    getVideoList () {
      const { current_page, page_size } = this.page
      listPublishRecord({
        page: { current_page, page_size },
        account_id: this.$route.query.account_id || sessionStorage.getItem('account_id')
      }).then(res => {
        if (res) {
          res.list.forEach(item => {
            item.time = this.$dayjs(item.publish_time).format('YYYY年MM月DD日')
            item.video_cover_url = `${this.oss_domain}/${item.video_cover_url}`
            item.video_url = `${this.oss_domain}/${item.video_url}`
          })
        }
        this.list = this.list.concat(res.list || [])
      })
    },
    getUserInfo () {
      getUserInfo({
        account_id: this.$route.query.account_id
      }).then(res => {
        if (res.head_image) res.head_image = `${this.oss_domain}/${res.head_image}`
        this.userInfo = res
      })
    }
  }
}
</script>

<style scoped>

.preview-video {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}
.dialog-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20.27vw;
  height: 20.27vw;
  z-index: 10;
}
.dialog-title {
  position: absolute;
  top: 3.2vw;
  left: 50%;
  transform: translateX(-50%);
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  color: #FFFFFF;
}
.detail-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  border-radius: 2.13vw;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3vw;
}
.dialog-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 79.47vw;
  height: 147.73vw;
  background-color: #fff;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.back {
  position: absolute;
  left: 6.4vw;
  top: 4.8vw;
  width: 2.67vw;
  height: 2.67vw;
}
.dialog-top {
  position: relative;
  height: 16vw;
  background: linear-gradient(180deg, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.00) 100%);
}


.play-btn {
  width: 3.2vw;
  height: 3.2vw;
  margin-right: 1.33vw;
}
.play-info {
  position: absolute;
  bottom: 1.87vw;
  left: 2.13vw;
  display: flex;
  align-items: center;
  height: 4.8vw;
  font-family: Source Han Sans CN;
  font-size: 3.2vw;
  font-weight: 500;
  line-height: 18px;
  color: #FFFFFF;
}
.list {
  display: flex;
  flex-wrap: wrap;
  width: 89.6vw;
  margin: 0 auto;
}
.date {
  position: absolute;
  right: 1.07vw;
  top: 1.07vw;
  font-family: Source Sans Pro;
  font-size: 2.67vw;
  font-weight: 600;
  line-height: 4.27vw;
  color: #FFFFFF;
}
.item-top {
  position: relative;
  height: 48vw;
  border-radius: 1.07vw;
  overflow: hidden;
  margin-bottom: 2.13vw;
  background-color: #000000;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.item {
  position: relative;
  margin-bottom: 4.27vw;
  width: 27.73vw;
  margin-right: 3.2vw;
}
.item:nth-child(3n) {
  margin-right: 0;
}
.view-count-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 83.73vw;
  height: 16vw;
  box-sizing: border-box;
  padding: 0 3.2vw;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #666666;
  background: #F8F8FA;
}
.blue-text {
  font-family: Source Sans Pro;
  font-size: 6.4vw;
  font-weight: bold;
  line-height: 7.47vw;
  color: #0A67FF;
}
.user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3.2vw;
}
.user-info-center {
  flex: 1;
}
.user-type {
  position: relative;
  top: -3vw;
  width: 12.27vw;
  text-align: center;
  height: 5.33vw;
  border-radius: 2.67vw;
  line-height: 5.33vw;
  background: #EA0000;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #FFFFFF;
}
.avatar {
  width: 15.47vw;
  height: 15.47vw;
  border-radius: 50%;
  margin-right: 3.2vw;
}
.user-name {
  margin-bottom: 2.13vw;
  font-family: Source Sans Pro;
  font-size: 4.8vw;
  font-weight: bold;
  line-height: 7.47vw;
  color: #3D3D3D;
}
.company-name {
  font-family: Source Han Sans CN;
  font-size: 3.2vw;
  font-weight: normal;
  color: #BDC6D9;
}
.top-content {
  box-sizing: border-box;
  padding: 3.2vw 3.2vw 0;
  width: 89.6vw;
  height: 41.6vw;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 2.13vw;
}
.top {
  box-sizing: border-box;
  padding-top: 7.47vw;
  height: 52.27vw;

  background: linear-gradient(180deg, #006EDD 0%, #009CEC 41%, #F8F8FA 100%);
}
.line-right {
  display: flex;
  align-items: center;
  height: 5.87vw;
}
.right-icon {
  width: 2vw;
  height: 2vw;
}
.account-setting {
}
.content {
  width: 89.6vw;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 2.13vw;
}
.line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 15.47vw;
  margin: 0 4vw;
  border-bottom: 1px solid #E6E6E6;
}
.line:last-of-type {
  border-bottom: none;
}
.label {
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: bold;
  color: #333333;
}
.red-text, .gray-text {
  margin-right: 1.6vw;
}
.red-text {
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #EA0000;
}
.gray-text {
  font-family: Source Han Sans CN;
  font-size: 3.2vw;
  font-weight: normal;
  color: #999999;
}
</style>